<template>
	<view>
		<view class="example-body">
			<view class="login-input-box">
				<view class="phone u-f-ajc">+86</view>
				<input type="text" v-model="phone"
				class="uni-input common-input phone-input"
				:class="{activeipt:activeArr[0]}"
				@focus="onfocus(0)"
				placeholder="手机号" />
			</view>
			<view class="login-input-box">
				<input type="text" v-model="checknum"
				class="uni-input common-input forget-input"
				:class="{activeipt:activeArr[1]}"
				@focus="onfocus(1)"
				placeholder="请输入验证码" />
				<view class="forget u-f-ajc login-font-color yanzhengma" :class="!codetime?'yzmbg':''"
				@tap="getCheckNum">
					<view class="u-f-ajc">{{!codetime?'获取验证码':codetime+' s'}}</view>
				</view>
			</view>
			<view class="login-input-box">
				<input v-model="newpassword" @blur="blurPsd" placeholder="新密码" maxlength="16" class="uni-input" :class="['uni-input', {activeipt:activeArr[2]}]" password type="text" @focus="onfocus(2)"/>
			</view>
			<view class="login-input-box">
				<input v-model="confirmpassword" placeholder="确认密码" maxlength="16" class="uni-input" :class="['uni-input', {activeipt:activeArr[3]}]" password type="text" @focus="onfocus(3)"/>
			</view>
		</view>
		<view class="note">
			密码必须是6-16位大、小写字母和数字组成
		</view>
		<view class="submit">
			<button type="primary" size="mini" @click="submit">保存</button>
		</view>
	</view>
</template>

<script>
	var md5 = require('../../common/md5.js');
	export default {
		data() {
			return {
				activeArr:[false,false,false,false],
				newpassword:'',
				confirmpassword:'',
				phone:"",
				checknum:"",
				codetime:0,
				code:null,
			}
		},
		methods: {
			onfocus(val){
				this.activeArr=[false,false,false,false]
				this.activeArr[val]=true
			},
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
			blurPsd(){
				let reg = /^(?=.*[a-zA-Z])(?=.*\d).{6,16}$/;
				if (!reg.test(this.newpassword)) {
					uni.showToast({ title: '密码输入有误！', icon:"none" })
				}
			},
			// 验证手机号码
			isPhone(){
				let mPattern = /^1[34578]\d{9}$/; 
				return mPattern.test(this.phone);
			},
			// 获取验证码
			async getCheckNum(){
				if(this.codetime > 0)return;
				// 验证手机号合法性
				if(!this.isPhone()){
					return uni.showToast({ title: '请输入正确的手机号码', icon:"none" });
				}
				// 请求服务器，发送验证码
				let [err,res] = await this.$http.post("/selectTel",{
					tel:this.phone
				});
				// 请求错误处理
				if (!this.$http.errorCheck(err,res)) return
				// 发送成功，开启倒计时
				this.codetime=60;
				let timer=setInterval(()=>{
					this.codetime--;
					if(this.codetime < 1){
						clearInterval(timer);
						this.codetime=0;
					}
				},1000);
				if(res.data == true) {
					let [err1,res1] = await this.$http.post("/sendcode",{
						"phonenumber":this.phone
					})
					// 请求错误处理
					if (!this.$http.errorCheck(err1,res1)){
						clearInterval(timer);
						this.codetime=0;
						return
					} 
					if(res1 == "") {
						uni.showToast({ title: '手机号码输入错误！', icon:"none" });
					} else {
						if(res1.data.name != "" && res1.data.name != null && res1.data.name != undefined) {
							this.code=res1.data.code
							// 本地存储
							uni.setStorageSync("name",res1.data.name);
							uni.setStorageSync("pno", res1.data.Pno);
						}else{
							uni.showToast({ title: '密码错误或者该用户名没有注册！', icon:"none" });
						}
					}
				} else {
					clearInterval(timer);
					this.codetime=0;
					uni.showToast({ title: '该手机号码未注册！', icon:"none" });
				}
			},
			async submit(){
				// 验证手机号合法性
				if(!this.isPhone()){
					return uni.showToast({ title: '请输入正确的手机号码', icon:"none" });
				}
				if(this.checknum!==this.code){
					return uni.showToast({ title: '验证码输入有误！', icon:"none" })					
				}
				let reg = /^(?=.*[a-zA-Z])(?=.*\d).{6,16}$/;
				if (!reg.test(this.newpassword)) {
					uni.showToast({ title: '新密码输入有误！', icon:"none" })
					return
				}
				if (this.newpassword!==this.confirmpassword) {
					uni.showToast({ title: '两次密码输入不一致！', icon:"none" })
					return
				}				
				let [err,res]=await this.$http.post("/updataUser",{
					tel: this.phone,
					password: md5.hex_md5(this.newpassword)
				})
				// 请求错误处理
				if (!this.$http.errorCheck(err,res)) return
				if(res.data==1){
					uni.showToast({ title: '密码修改成功！', icon:"success" })
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						});
					},1500)
				}else{
					uni.showToast({ title: '当前用户不存在!', icon:"none" })
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.login-input-box{
	position: relative;
	margin: 0 20upx;
}
.login-input-box .forget-input{
	padding-right: 150upx;
}
.login-input-box .forget,.login-input-box .phone{
	position: absolute;
	top: 0;
	height: 100%;
	z-index: 100;
}
.login-input-box .forget{
	width: 150upx;
	right: 0;
}
.login-input-box .phone{
	width:100upx;
	left: 0;
	font-weight: bold;
}
.login-input-box .phone-input{
	padding-left: 100upx;
}
.yanzhengma view{
	background: #EEEEEE;
	border-radius: 10upx;
	font-size: 25upx;
	width: 150upx;
	padding: 10upx 0;
}
.yzmbg view{
	background: #26ca0d;
	color: #fff;
}
// .uni-view{
// 	justify-content: center;
// }
// .item{
// 	display: flex;
// 	justify-content: center;
// 	margin-right: 40upx;
// 	.item-title{
// 		flex-basis: 150upx;
// 		display: flex;
// 		align-items: center;
// 		padding-left: 40upx;
// 		font-size: 35upx;
// 	}
// 	.uni-input{
// 		flex: 1;
// 	}
// }
// .uni-input {
// 	border-bottom: 1px solid #ececec;
// }
.activeipt {
	border-bottom: 1px solid #26ca0d;
}
.note{
	font-size: 30upx;
	padding-left: 40upx;
	margin-top: 20upx;
	color: #999999;
}
.submit{
	display: flex;
	justify-content: center;
	margin-top: 20upx;
	uni-button[type=primary]{
		background-color: #26ca0d!important;
	}
}
</style>
